<template>
  <div class="container">
    <div class="myInfo">
      <div class="login">
        <span></span><span></span>
      </div>
      <loginStatusN></loginStatusN>
    </div>
    <div class="myIcon">
      <span></span>
    </div>
    <zhuan></zhuan>
    <p class="oneLine"></p>
    <div class="dingdan">
      <div class="mine">
        <span></span>我的订单
      </div>
      <div class="quanbu">
        全部订单<span></span>
      </div>
    </div>
    <ul class="ui-tiled">
      <li>
        <span></span>
        <div>待付款</div>
      </li>
      <li>
        <span></span>
        <div>待发货</div>
      </li>
      <li>
        <span></span>
        <div>待收货</div>
      </li>
      <li>
        <span></span>
        <div>待评价</div>
      </li>
      <li>
        <span></span>
        <div>退换货</div>
      </li>
      <p class="clear"></p>
    </ul>
    <p class="twoLine"></p>
    <div class="dingdan">
      <div class="mine">
        <span class="money"></span>我的钱包
      </div>
      <div class="quanbu">
        查看全部<span></span>
      </div>
    </div>

    <countN></countN>

    <p class="clear"></p>
    <p class="twoLine"></p>
    <ul class="menu">
      <li class="item border-r">
        <span class="icons icons-fans"></span>
        <div class="f12">粉丝团</div>
      </li>
      <li class="item border-r">
        <span class="icons icons-chat"></span>
        <div class="f12">报表中心</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-tuan"></span>
        <div class="f12">我的团</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-price"></span>
        <div class="f12">我的砍价单</div>
      </li><p class="clear"></p>
      <li class="item border-r">
        <span class="icon4 icons4-cang"></span>
        <div class="f12">我的收藏</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-ping"></span>
        <div class="f12">我的评价</div>
      </li>
      <li class="item border-r">
        <span class="icon2 icons4-fu"></span>
        <div class="f12">一句话福利</div>
      </li>
      <p class="clear"></p>
    </ul>
    <p class="twoLine"></p>
    <ul class="menu">
      <li class="item border-r">
        <span class="icon4 icons4-1"></span>
        <div class="f12">收货地址</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-2"></span>
        <div class="f12">常购清单</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-3"></span>
        <div class="f12">查询伊点卡</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-4"></span>
        <div class="f12">查询门店</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-5"></span>
        <div class="f12">加盟来伊份</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-6"></span>
        <div class="f12">中奖纪录</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-7"></span>
        <div class="f12">增票资质</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-8"></span>
        <div class="f12">客服热线</div>
      </li>
      <li class="item border-r">
        <span class="icon4 icons4-9"></span>
        <div class="f12">在线客服</div>
      </li>
      <p class="clear"></p>
    </ul>
    <p class="null"></p>
    <footer-link></footer-link>
  </div>
</template>
<script>

  import loginStatusN from "../login/loginStatusN.vue"
  import zhuan from "../login/zhuan.vue"
  import countN from "../login/countN.vue"
  import footerLink from "../common/FooterLink.vue"
  export default {
    components:{
      loginStatusN,
      zhuan,
      countN,
      footerLink
    }
  }
</script>
<style>
  .null{
    height: .8rem;
    background: #f0f0f0;
  }
  .myInfo{
    height: 1.62rem;
    width: 100%;
    background: -webkit-linear-gradient(top,#ffb300,#ff6c00);
  }
  .myInfo .login{
    height:.53rem;
    /*background: pink;*/
    line-height: .53rem;
    text-align: right;
  }
  .myInfo .login span{
    background: url("../../../static/imgs/lyf-icons.png") no-repeat;
    display: inline-block;
    width: .2rem;
    height: .2rem;
    background-size: 3.35rem auto;
    margin-right: .16rem;
  }
  .myInfo .login span:first-of-type{
    background-position: -220px  -189px;
  }
  .myInfo .login span:last-of-type{
    background-position: -189px  -189px;
  }
  .myInfo .login-status{
    width: 1.92rem;
    margin: 0 auto;
    font-size: 0;
  }
  .myInfo .login-status div{
    width: .64rem;
    height: .64rem;
    /*border:1px solid black;*/
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }
  .myInfo .login-status div p{
    width: .38rem;
    height: .18rem;
    background: #ffc600;
    border-radius: .1rem;
    line-height: .18rem;
    text-align: center;
    color: white;
    margin: .12rem .12rem .1rem .12rem;
    font-size: .12rem;
  }
  .myInfo .login-status div i{
    font-style: normal;
    color: white;
    font-size: .12rem;
  }

  .myInfo .login-status .icon img{
    width: 100%;
    height:100%;
  }
  .myInfo .phone{
    height: .45rem;
    text-align: center;
    line-height: .45rem;
    color: #ffc600;
    font-size: .17rem;
  }

  .myIcon{
    height:.42rem;
    width: 100%;
    background: url("../../../static/imgs/myIcon-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  .myIcon span{
    display: inline-block;
    width: .55rem;
    height: .4653rem;
    vertical-align: top;
    background: url("../../../static/imgs/myIcon.gif") no-repeat;
    background-size: 95%;
  }

  .oneLine{
    height:.08rem;
    background: #f0f0f0;
  }
  .dingdan{
    height: .47rem;
    line-height: .47rem;
    margin-left: .15rem;
    border-bottom: 1px solid #e0e0e0;
  }
  .dingdan .mine{
    font-size: 16px!important;
    color:#000;
    float: left;
  }
  .dingdan .mine span{
    display: inline-block;
    width: .15rem;
    height: .19rem;
    background: url("../../../static/imgs/icons4.png") no-repeat;
    background-position: -.38rem -.72rem;
    background-size: 3.75rem auto;
    vertical-align: middle;
    margin-right: .1rem;

  }
  .dingdan .quanbu{
    float: right;
    color:grey;
    font-size: .14rem;
  }
  .dingdan .quanbu span{
    display: inline-block;
    vertical-align: middle;
    background: url(http://m.static.laiyifen.com/images/icons2.png?v=1501500776374) no-repeat;

    background-size: 375px auto;
    width: 10px;
    height: 15px;
    background-position: -36px -248px;
    margin-right: .15rem;
    margin-left: .07rem;
  }
  .ui-tiled{
    margin: .1rem 0;
    width: 100%;
  }
  .ui-tiled li{
    width: 20%;
    height: .46rem;
    float: left;
    text-align: center;
  }
  .ui-tiled li span{
    display: inline-block;
    background: url("../../../static/imgs/icons-au.png") no-repeat;
    width: .3rem;
    height: .25rem;
    vertical-align: middle;
    background-size: 335px auto;
  }
  .ui-tiled li div{
    font-size: .12rem!important;
    color:#333;
  }
  .ui-tiled li:first-of-type span{
    background-position: 0 -.95rem;
  }
  .ui-tiled li:last-of-type span{
    background-position: 3px -222px;
  }
  .ui-tiled li:nth-of-type(2) span{
    background-position: 3px -126px;
  }
  .ui-tiled li:nth-of-type(3) span{
    background-position: 3px -157px;
  }
  .ui-tiled li:nth-of-type(4) span{
    background-position: 3px -189px;
  }
  .twoLine{
    height: .1rem;
    background: #f0f0f0;
  }
  .clear{
    clear: both;
    height: 0;
  }
  .dingdan .mine .money{
    background-position: -38px -107px;
    background-size: 375px auto;
  }

  .count li{
    width: 1rem;
    text-align: center;
    float: left;
  }
  .count li span{
    color: #ff6900;
    display: inline-block;
    font-size: .2rem;
    height: .38rem;
    line-height: .38rem;
  }
  .count li p{
    height: .24rem;
    line-height: .24rem;
    color: #333;
    margin-bottom:.15rem;
  }
  .count .mag10{
    margin-left: .1rem;
  }


  /* 测试代码*/
  .menu{
    box-sizing:border-box
  }

  .menu .item{
    width: 25%;
    text-align: center;
    float:left;
    box-sizing:border-box;
    padding: .1rem 0;
  }
  /*.pd10{*/
  /*padding: .1rem 0;*/
  /*}*/
  .border-r{
    border-right:1px solid #efefef;
    border-bottom: 1px solid  #efefef;
  }
  .icons{
    display: inline-block;
    vertical-align: middle;
    background: url("../../../static/imgs/lyf-icons.png") no-repeat;
    background-size: 375px auto;
    width: .3rem;
    height: .3rem;
  }
  .icons-fans{
    background-position: -319px -531px;
  }
  .f12{
    color: #333;
    font-size: .12rem;
    margin-top: .08rem;
  }
  .icons-chat{
    background-position:-284px -532px;
  }
  .icon4{
    display: inline-block;
    vertical-align: middle;
    background: url("../../../static/imgs/icons4.png") no-repeat;
    background-size: 335px auto;
    width: .3rem;
    height: .3rem;
  }
  .icons4-tuan{background-position: 0 -320px;}
  .icons4-price{background-position: 0 -346px;}
  .icons4-cang{background-position: 0 -126px;}
  .icons4-ping{background-position: 0 -158px;}
  /*.icons4-fu{background-position: -71px -246px;}*/
  .icon2{
    display: inline-block;
    vertical-align: middle;
    background: url("../../../static/imgs/icons2.png") no-repeat;
    background-size: 375px auto;
    width: .3rem;
    height: .3rem;
  }
  .icons4-fu{background-position: -71px -246px;}

  /*收货地址列表*/
  .icons4-1{  background-position: 0 2px;  }
  .icons4-2{  background-position: 0 -191px;  }
  .icons4-3{  background-position: 0 -250px;  }
  .icons4-4{  background-position: 0 -282px;  }
  .icons4-5{  background-position: -30px 3px;  }
  .icons4-6{  background-position: -30px -122px;  }
  .icons4-7{  background-position: 3px -30px;  }
  .icons4-8{  background-position: 0 -63px;  }
  .icons4-9{  background-position: 0 -95px;  }
</style>
